<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" href="css/main.css" />
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-search placeholder="搜索商品名称"></van-search>
			</header>
			<section>
				<van-row>
					<van-col span="8">
						<van-badge-group :active-key="activeKey" @change="onChange">
							<van-badge :title="Nr.Name" v-for="(Nr,index) in ListType" @click="dj(Nr.Id)">
							</van-badge>
						</van-badge-group>
					</van-col>
					<van-col span="16">
						<van-row>
							<van-col span="12" v-for="(Sj,index) in Nr">
								<div>
									<img src="Nr.GoodImageUrl " onerror="this.src='img/tupian .jpg';" style="width:95% ;">
								</div>
								<div  @click="IntoDetails(Sj.Id)" >
									{{Sj.Name}}
								</div>
								<div style="color: red;">
									￥{{Sj.MarketPrice}}
								</div>
								<div style="color: #969799; font-size: 12px;">
									阅读量:{{Sj.BrowseCount}}
								</div>
								<div style="color: #969799; font-size: 12px;">
									销量:{{Sj.VirtualSaleCount}}
								</div>
							</van-col>

						</van-row>

					</van-col>
				</van-row>
			</section>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				activeKey: 0,
				ListType: [],
				Nr: [],
			},
			mounted: function() {

				$.post("http://dsapi.ysd3g.com/api/Categories", {}, function(res) {

					vm.ListType = res.Categories;

				}, "JSON")
				$.post("http://dsapi.ysd3g.com/api/GoodsByCategoryId", {
					typeId: 3,
					p: 1
				}, function(res) {
					console.log(res)
					vm.Nr = res.Data;
				}, "JSON")
			},
			methods: {
				onChange(key) {
					this.activeKey = key;
				},
				dj: function(Id) {
					$.post("http://dsapi.ysd3g.com/api/GoodsByCategoryId", {
						typeId: Id
					}, function(res) {
						vm.Nr = res.Data;
					}, "JSON")
				},
				IntoDetails: function(id) {
					var self_home = plus.webview.currentWebview();
					var child_detail = plus.webview.create("../details/detail.html", "detail", {}, {
						Id: id
					});
					self_home.append(child_detail);
					plus.webview.show("detail");
				}

			}


		})
	</script>
</html>
